<template>
  <div class="page-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-title">
        <h1>表格测试页面</h1>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
      <!-- 测试信息 -->
      <div style="padding: 10px; background: #f0f0f0; margin-bottom: 10px;">
        <p>测试数据长度: {{ testData.length }}</p>
        <p>列数: {{ tableColumns.length }}</p>
      </div>
      
      <!-- 使用 BaseTable 组件 -->
      <BaseTable
        table-name="testTable"
        :columns="tableColumns"
        :data="testData"
        :loading="false"
        :sort="{}"
        @sort-change="handleSortChange"
      >
        <!-- 操作列自定义内容 -->
        <template #actions="{ row }">
          <el-button type="text" size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button type="text" size="small" @click="handleDelete(row)" class="danger-text">
            删除
          </el-button>
        </template>
      </BaseTable>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import BaseTable from '@/components/tools/BaseTable.vue'

// 测试数据
const testData = ref([
  {
    id: 1,
    name: '测试数据1',
    description: '这是第一条测试数据',
    amount: 100.50,
    status: 'active',
    createTime: '2024-01-01'
  },
  {
    id: 2,
    name: '测试数据2',
    description: '这是第二条测试数据',
    amount: 200.75,
    status: 'inactive',
    createTime: '2024-01-02'
  },
  {
    id: 3,
    name: '测试数据3',
    description: '这是第三条测试数据',
    amount: 300.25,
    status: 'active',
    createTime: '2024-01-03'
  }
])

// 表格列配置
const tableColumns = [
  { prop: 'id', label: 'ID', width: 80, visible: true },
  { prop: 'name', label: '名称', width: 150, visible: true },
  { prop: 'description', label: '描述', minWidth: 200, visible: true },
  { prop: 'amount', label: '金额', width: 120, align: 'right', visible: true },
  { prop: 'status', label: '状态', width: 100, visible: true },
  { prop: 'createTime', label: '创建时间', width: 150, visible: true },
  { prop: 'actions', label: '操作', width: 150, slot: 'actions', fixed: 'right', visible: true }
]

// 处理排序变化
const handleSortChange = (sort) => {
  console.log('排序变化:', sort)
}

// 处理编辑
const handleEdit = (row) => {
  ElMessage.info(`编辑: ${row.name}`)
}

// 处理删除
const handleDelete = (row) => {
  ElMessage.info(`删除: ${row.name}`)
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.header-title {
  padding: 20px 20px 10px 20px;
  border-bottom: 1px solid #eee;
}

.header-title h1 {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.table-container {
  min-height: 600px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.danger-text {
  color: #f56c6c;
}

.danger-text:hover {
  color: #f78989;
}
</style> 